<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0,viewport-fit=cover" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
    <script type="text/javascript" src="../../script/vant.min.js"></script>
    <script type="text/javascript" src="../../script/base.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        zoom: 0.9;
        background-color: #e8e8e8;
    }

    .van-field__right-icon {
        width: 40px;
    }

    .van-field__right-icon .van-icon {
        font-size: 20px;
        color: #333;
    }

    /* 表单内容 */
    .MainBox {
        padding: 10px 20px;
    }

    .MainBox .FormDataBox {
        padding: 10px 20px;
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 1px 1px 13px -12px #333;
    }

    .MainBox .FormDataBox .BtnBox {
        margin: 40px 16px 16px;
    }

    /* 密码修改完成盒子 */
    .FinishBox {
        padding: 0 20px;
    }

    .FinishBox .TextBox {
        min-height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 20px;
        background-color: #fff;
        padding: 30px 0;
        border-radius: 12px;
        text-align: center;
    }

    .FinishBox .TextBox div:first-child {}

    .FinishBox .TextBox div:nth-child(2) {
        margin-top: 10px;
    }

    .FinishBox .TextBox div:nth-child(2) span {
        font-size: 18px;
        color: #333;
    }

    .FinishBox .TextBox div:last-child {
        margin-top: 20px;
    }

    .FinishBox .TextBox div:last-child span {
        font-size: 14px;
        color: #999;
    }

    /* 遮罩层 */
    .van-overlay {
        background-color: rgba(0, 0, 0, .5) !important;
    }

    /* 加载 */
    .LoadingBox {
        position: relative;
        width: 210px !important;
        height: 100px !important;
    }

    .TheLoading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .LoadingOverlay .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .LoadingOverlay .block {
        width: 210px !important;
        /* height: 100px !important; */
        border-radius: 12px !important;
        background: #4d4d4d !important;
        text-align: center;
        color: #fff;
        padding: 0 0 15px;
    }

    .spinner-6 {
        /* 加载大小 */
        width: 60px;
        aspect-ratio: 1;
        display: grid;
        -webkit-mask: conic-gradient(from 15deg, #0000, #000);
        animation: s6 1s infinite steps(12);
    }

    .spinner-6,
    .spinner-6:before,
    .spinner-6:after {
        background:
            radial-gradient(closest-side at 50% 12.5%,
                #f03355 96%, #0000) 50% 0/20% 80% repeat-y,
            radial-gradient(closest-side at 12.5% 50%,
                #f03355 96%, #0000) 0 50%/80% 20% repeat-x;
    }

    .spinner-6:before,
    .spinner-6:after {
        content: "";
        grid-area: 1/1;
        transform: rotate(30deg);
    }

    .spinner-6:after {
        transform: rotate(60deg);
    }

    @keyframes s6 {
        100% {
            transform: rotate(1turn)
        }
    }
</style>

<body>
    <div id="app" v-cloak>
        <van-nav-bar-main title="修改密码">
            <template #left>
                <van-icon v-show="!IsChange" name="arrow-left" size="18" @click="onClickLeft"></van-icon>
            </template>
        </van-nav-bar-main>


        <div v-if="!IsChange" class="MainBox">
            <van-form @submit="onSubmit" class="FormDataBox">
                <van-field v-model="formData.userName" name="userName" label="账户" readonly></van-field>

                <van-field v-model="formData.password" :type="Types.password" name="password" label="原密码"
                    placeholder="请输入原密码" :rules="getRule(UserInfo,'old')" required clearable
                    :right-icon="ShowText.password" @click-right-icon="ToggleType('password',ShowText.password)">
                </van-field>

                <van-field v-model="formData.NewPassword" :type="Types.NewPassword" name="NewPassword" label="新密码"
                    placeholder="请输入新密码" :rules="getRule(UserInfo,'new')" required clearable
                    :right-icon="ShowText.NewPassword"
                    @click-right-icon="ToggleType('NewPassword',ShowText.NewPassword)"></van-field>

                <van-field v-model="formData.ConfirmPassword" :type="Types.ConfirmPassword" name="ConfirmPassword"
                    label="确认密码" placeholder="请确认密码" :rules="getRule(UserInfo,'Confirm')" required clearable
                    :right-icon="ShowText.ConfirmPassword"
                    @click-right-icon="ToggleType('ConfirmPassword',ShowText.ConfirmPassword)">
                </van-field>


                <div class="BtnBox">
                    <van-button round block type="info" style="background-color: #a4e1cf;border: none !important;"
                        native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>

        <div class="FinishBox" v-else>
            <div class="TextBox">
                <div>
                    <van-icon name="checked" color="#2adb65" size="100"></van-icon>
                </div>
                <div>
                    <span>密码重置成功</span>
                </div>
                <div>
                    <span>您的密码已重置成功，请重新登录</span>
                </div>
            </div>

            <div style="margin-top: 40px;">
                <van-button @click="LoginOut"
                    style="width: 80%;background-color: #a4e1cf;color: #fff;display: flex;align-items: center;justify-content: center;margin: 0 auto;">
                    重新登录( {{CountdownTime}} S )
                </van-button>
            </div>
        </div>


        <!-- 加载 -->
        <van-overlay :show="showLoading" @click="showLoading = false" class="LoadingOverlay">
            <div class="wrapper" @click.stop>
                <div class="block">

                    <div class="LoadingBox">
                        <div class="TheLoading">
                            <div class="spinner-6"></div>

                        </div>
                    </div>
                    <span style="font-size: 24px;">加载中</span>
                </div>
            </div>
        </van-overlay>

    </div>
</body>
<script type="text/javascript">
    var vm;
    var y = 0;
    apiready = function () {

        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false, // 加载
                formData: { // 表单内容
                    userName: '',
                    password: '',
                    NewPassword: '',
                    ConfirmPassword: '',
                },
                UserInfo: {}, // 用户信息
                Types: { // 表单输入框 type 状态
                    password: 'password',
                    NewPassword: 'password',
                    ConfirmPassword: 'password',
                },
                ShowText: { // 表单输入框 右侧 小眼睛
                    password: 'closed-eye',
                    NewPassword: 'closed-eye',
                    ConfirmPassword: 'closed-eye',
                },
                IsChange: false, // 密码是否修改成功
                CountdownTime: 5, // 倒计时时间
                Timer: null, // 接收定时器
            },
            created: function () {
                var that = this;
                let UserInfo = JSON.parse(window.localStorage.getItem('userInfo'))
                that.UserInfo = UserInfo
                that.formData.userName = UserInfo.loginName

            },
            watch: {
                IsChange(val) { // 监听密码是否已更改
                    var that = this
                    if (val) {
                        that.Timer = setInterval(() => {
                            that.CountdownTime--
                        }, 1000);
                    }
                },
                CountdownTime(val) { // 监听秒数
                    var that = this
                    if (val == 0) {
                        // 关闭定时器
                        clearInterval(that.Timer)

                        // 退出登录
                        that.LoginOut()
                    }
                }
            },
            methods: {
                ToggleType(key, data) { // 切换密码框Type
                    if (data == 'eye-o') {
                        vm.ShowText[key] = 'closed-eye'
                        vm.Types[key] = 'password'
                    } else {
                        vm.ShowText[key] = 'eye-o';
                        vm.Types[key] = 'text'
                    }

                },
                getRule(obj, data) { // 返回校验方法
                    var that = this

                    if (data == 'old') {
                        return [
                            {
                                required: true,
                                message: '请输入原密码'
                            },
                            {
                                obj,
                                validator: that.validator,
                                message: '请输入正确的原密码',
                                trigger: 'onBlur',
                            },
                        ]
                    } else if (data == 'new') {
                        return [
                            {
                                required: true,
                                message: '请输入新密码'
                            },
                            {
                                obj,
                                validator: that.validator_new,
                                message: '密码个数最少 6 位',
                                trigger: 'onBlur',
                            },
                        ]
                    } else if (data == 'Confirm') {
                        return [
                            {
                                required: true,
                                message: '请再次填写新密码'
                            },
                            {
                                obj,
                                validator: that.validator_Confirm,
                                message: '两次密码不一致',
                                trigger: 'onBlur',
                            },
                        ]
                    }

                },
                validator(value, rule) { // 原密码校验
                    var that = this

                    if (value != that.UserInfo.pwd) {
                        return false
                    }
                    return true
                },
                validator_new(value, rule) { // 新密码校验
                    var that = this

                    if (value.length < 6) {
                        return false
                    }
                    return true
                },
                validator_Confirm(value, rule) { // 确认密码校验
                    var that = this

                    if (value != that.formData.NewPassword) {
                        return false
                    }
                    return true
                },
                onSubmit(values) { // 提交修改
                    vant.Dialog.confirm({
                        title: '提示',
                        message: '是否确认修改密码？',
                    }).then(() => {
                        vm.showLoading = true

                        let obj = {
                            oldPwd: values.password,
                            newPwd: values.NewPassword,
                            userId: vm.UserInfo.UserID,
                        }

                        APP.ajax('updateUserPwd', obj, function (res) {
                            if (res.ds[0].status == 200) {
                                setTimeout(() => {
                                    vm.IsChange = true
                                    vm.showLoading = false
                                }, 1000);
                            } else {
                                vant.Toast(res.ds[0].msg || '接口请求错误，请重新尝试')
                            }
                        })
                    }).catch(() => {

                    });


                },
                onClickLeft() { // 返回上一页
                    api.closeWin()
                },
                LoginOut() { // 退出登录
                    var that = this

                    that.UserInfo.pwd = ''

                    window.localStorage.setItem('userInfo', JSON.stringify(that.UserInfo))

                    api.sendEvent({
                        name: 'ClearPwd'
                    })

                    api.closeToWin({ name: 'root' });
                },
            }
        })
    }
</script>